<template>
  <div class="user">
    <!-- 头部布局 -->
    <div class="user_top">
      <img :src="headImg" width="70px" height="70px" alt="" />
      <h3 v-if="islogined">{{ username }}</h3>
      <h3 v-else @click="loginClick">点击登录</h3>
      <van-icon :name="!islogined ? 'arrow' : 'cross'" @click="loginClick" />
    </div>
    <!-- 遮罩 -->
    <van-overlay @click="isshowmodal = false" v-show="isshowmodal">
      <!-- @click='isshowmodal=false' 点击旁边消失遮罩 -->
      <div class="wrapper">
        <!-- 表单登录 -->
        <div @click.stop>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </van-overlay>
    <!-- 中部图标 -->
    <van-grid :column-num="3" :square='true' :border='false' >
      <van-grid-item icon="location" text="我的订单" />
      <van-grid-item icon="like" text="优惠价" />
      <van-grid-item icon="star" text="礼品卡" />
      <van-grid-item icon="phone" text="文我的收藏" />
      <van-grid-item icon="setting" text="我的足迹" />
      <van-grid-item icon="fire" text="会员福利" />
      <van-grid-item icon="coupon" text="地址管理" />
      <van-grid-item icon="cart" text="账号安全" />
      <van-grid-item icon="gem" text="联系客服" />
      <van-grid-item icon="gift" text="帮助中心" />
      <van-grid-item icon="point-gift" text="意见反馈" />
    </van-grid>
  </div>
</template>

<script>
import { loginFn } from "@/utils/http";
export default {
  name: "User",
  data() {
    return {
      islogined: false, //1 定义登录状态
      username: "", //登录用户名
      password: "", //密码
      // show: false,//遮罩
      isshowmodal: false, //是否显示模态框
      headImg:
        "https://img.ixintu.com/download/jpg/202001/8ba450657afc0be00c65d8751b09beb3.jpg!con",
      denglvhou: "https://i.keaimeitu.com/uploads/allimg/200504/110822694.jpg",
    };
  },
  created() {
    //当前切换到我的页 重新触发组件实例的生命周期
    // console.log('created');
    // 根据本地登录状态判断当前是否登录,如果有说明已登录
    const userinfo = JSON.parse(localStorage.getItem("userinfo"));
    if (userinfo) {
      //说明已经登录
      this.islogined = true;
      this.username = userinfo.username;
    } else {
      //说明未登录
    }
  },
  methods: {
    //点击提交按钮
    onSubmit(values) {
      console.log("submit", values);
      loginFn({ username: values["用户名"], pwd: values["密码"] }).then(
        (res) => {
          console.log(res);
          if (res.data.errno == 0) {
            //登录成功
            //01 修改登录状态
            this.islogined = true;
            // 02 将后端返回的token 字段存到本地
            localStorage.setItem("token", res.data.data.token);
            //03 将后端返回的用户信息存到本地
            localStorage.setItem(
              "userinfo",
              JSON.stringify(res.data.data.userInfo)
            );
            //04 模态框隐藏
            this.isshowmodal = false;
            //将用户信息显示在 页面中
            this.username = res.data.data.userInfo.username;
            this.headImg = this.denglvhou;
          } else {
            //登录失败
          }
        }
      );
    },
    //点击登录
    loginClick() {
      if (this.islogined) {
        //当是登录状态,退出登录
        console.log(this);
        this.$dialog
          .confirm({
            title: "提示",
            message: "确认退出吗?",
          })
          .then(() => {
            // 点击确认,表示确定要退出
            // 01 将本地存储的用户信息清除 和 token
            localStorage.removeItem("userinfo");
            localStorage.removeItem("token");
            this.islogined = false;
          })
          .catch(() => {
            // 点击取消
          });
      } else {
        //当未登录时,显示登录的模态框
        this.isshowmodal = true;
        //清空
        this.username = "";
      }
    },
  },
};
</script>

<style lang='less' scoped>
// 遮罩
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-form {
  z-index: 999;
}
.user {
  .user_top {
    background: #333;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 6px;
    img {
      border-radius: 50%;
      margin-right: 10px;
    }
    h3 {
      flex: 1;
    }
  }
}
</style>